﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<script type="text/javascript" src='js/echarts.js'></script>
</head>

<body>
	<div id="main1" style="width: 600px; height:400px"></div>
	<div id="main2" style="width: 600px; height:400px"></div>
	<script type="text/javascript">
		//基于准备好的dom，初始化ECharts图表
		var myChart1 = echarts.init(document.getElementById("main1"));
		var option1 = {  //指定第1个图表的配置项和数据
			color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1
			title: { text: '某学院2019年专业招生情况汇总表', left: 40, top: 5 },
			tooltip: { tooltip: { show: true }, },
			legend: { data: ['2019年招生'], left: 422, top: 8 },
			xAxis: [{
				data: ["大数据", "云计算", "Oracle", "ERP", "人工智能",
					"软件开发", "移动开发", "网络技术"],axisLabel:{interval: 0}
			}],
			yAxis: [{ type: 'value', }],
			series: [{  //配置第1个图表的数据系列
				name: '2019年招生',
				type: 'bar', barWidth: 40,  //设置柱状图中每个柱子的宽度
				data: [125, 62, 45, 56, 123, 205, 108, 128],
			}]
		};
		//基于准备好的dom,初始化ECharts图表
		var myChart2 = echarts.init(document.getElementById("main2"));
		var option2 = {  //指定第2个图表的配置项和数据
			color: ['blue', 'LimeGreen', 'DarkGreen', 'red', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1
			title: { text: '某学院2020年专业招生情况汇总表', left: 40, top: 8 },
			tooltip: { show: true },
			legend: { data: ['2020年招生'], left: 422, top: 8 },
			xAxis: [{
				data: ["大数据", "云计算", "Oracle", "ERP", "人工智能",
					"软件开发", "移动开发", "网络技术"],axisLabel:{interval: 0}
			}],
			yAxis: [{ type: 'value', }],
			series: [{  //配置第2个图表的数据系列
				name: '2020年招生',
				type: 'bar', barWidth: 40,  //设置柱状图中每个柱子的宽度
				data: [325, 98, 53, 48, 222, 256, 123, 111],
			}]
		};
		myChart1.setOption(option1);  //为myChart1对象加载数据
		myChart2.setOption(option2);  //为myChart2对象加载数据
		//多图表联动配置方法1：分别设置每个echarts对象的group值
		myChart1.group = 'group1';
		myChart2.group = 'group1';
		echarts.connect('group1');
	//多图表联动配置方法2：直接传入需要联动的echarts对象myChart1，myChart2
	//echarts.connect([myChart1,myChart2]);
	</script>
</body>

</html>